import { createVNode, render } from 'vue'
import ShopConfirm from './shop-confirm.vue'

// 3.准备一个dom容器装载组件
const div = document.createElement('div')
div.setAttribute('class', 'shop-confirm-container')
document.body.appendChild(div)

// 返回一个Promise对象，点击取消或确认都要销毁组件
export default ({ title, text }) => {
  // 1.导入被创建的组件
  return new Promise((resolve, reject) => {
    // 点击取消触发的函数
    const cancelCallback = () => {
      render(null, div)
      reject(new Error('点击取消'))
    }
    // 点击确认触发的函数
    const confirmCallback = () => {
      render(null, div)
      resolve()
    }
    // 2.使用createVNode创建虚拟节点
    const vn = createVNode(ShopConfirm, { title, text, cancelCallback, confirmCallback })
    // 4.使用render函数渲染组件到容器
    render(vn, div)
  })
}
